<script>
    import '@shoelace-style/shoelace/dist/components/input/input.js';
    import '@shoelace-style/shoelace/dist/components/menu/menu.js';
    import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
    import '@shoelace-style/shoelace/dist/components/button/button.js';
    import '@shoelace-style/shoelace/dist/components/divider/divider.js';
    import SidebarChild from "$lib/components/public/SidebarChild.svelte";
    import {isOpen,menuItems} from "$lib/stores/globalControl.svelte.js";
    import {changePath} from "$lib/scripts/change-path.svelte.js";
    import {loadMenu} from '$lib/scripts/load-menu.svelte.js'
    import {goto} from "$app/navigation";

    //加载侧边栏 菜单
    loadMenu();

    //设置抽屉关闭
    function openSidebar() {
        isOpen.set(true);
    }
    function closeSidebar() {
        isOpen.set(false);
    }

    //
    let expandedMenus = $state(new Set());

    // 切换子菜单展开状态
    function toggleExpand(name) {
        expandedMenus = new Set(expandedMenus);
        expandedMenus.has(name)
            ? expandedMenus.delete(name)
            : expandedMenus.add(name);
    }

    //关键字的状态
    let keyWord = "";
    //搜索框
    function search(event){


        function slinput(e){
            keyWord = e.target.value;
        }

        function menuRecursion(arr,keyWord,target){

            arr?.forEach(item=>{
                if(item.name === keyWord){
                    goto(item.path);//跳转
                    target.value = keyWord = "";
                    return ;
                }else{
                    menuRecursion(item.children,keyWord,target)
                }

            })
        }

        function keydown(e){
            if(e.key === "Enter"){
                if(!keyWord.length) return;
                //输入值不为空
                menuRecursion($menuItems,keyWord,e.target);
                return;
            }

        }

        function removeBind(e){
            e.target.removeEventListener("sl-input",slinput);
            e.target.removeEventListener("keydown",keydown);
            e.target.removeEventListener("sl-blur",removeBind);
        }



        event.target.addEventListener("sl-input",slinput);
        event.target.addEventListener("keydown",keydown);
        event.target.addEventListener("sl-blur",removeBind);

    }

</script>

<div class="sidebar" >

    <div
        class="drawer"
        style="display: {$isOpen ? 'block' : 'none'}"
    >
        <!--Title-->
        <div class="title" onclick={()=>changePath("/")}>
            后台系统
        </div>

        <sl-divider style="--color: tomato;margin: 1rem 0px"></sl-divider>

        <!-- 搜索框   -->
        <div class="search-input-box">
            <sl-input placeholder="搜索..." onsl-focus="{search}" >
                <sl-icon name="search" slot="suffix" style="margin: 1rem"></sl-icon>
            </sl-input>
        </div>

        <!--菜单组-->
        <sl-menu>
            {#each $menuItems as item}
                {#if item?.children?.length}
                    <!--有children的-->
                    <sl-menu-item onclick={() => toggleExpand(item.name)}>
                        <sl-icon name={item.icon} slot="prefix"/>
                        <span class="interval">{item.name}</span>
                        <sl-icon
                                name={expandedMenus.has(item.name) ? 'chevron-down' : 'chevron-right'}
                                slot="suffix"
                        />

                    </sl-menu-item>

                    <!--二级路由-->
                    {#if expandedMenus.has(item.name)}
                        <SidebarChild data={item?.children} {changePath} />
                    {/if}
                {:else}
                    <!--没有children的-->
                    {#if item?.show}
                        <sl-menu-item onclick={() => {
                            changePath(item?.path);
                        }}>
                            <sl-icon name={item?.icon} slot="prefix"/>
                            <span class="interval">{item?.name}</span>
                        </sl-menu-item>
                    {/if}
                {/if}
            {/each}
        </sl-menu>

    </div>
    <!--  sl-button : 按钮已经被自定义化  -->
    <sl-button class="slbtn"  variant="primary" onclick={closeSidebar}>收起</sl-button>
</div>



<div class="open" style="opacity: {!$isOpen ? '1' : '0'}" onclick={openSidebar}>
    <sl-button variant="default" size="small" circle>
        <sl-icon name="menu-button-wide" label="menu"></sl-icon>
    </sl-button>
</div>

<style>
    /* 侧边栏容器 */
    .sidebar {
        position: absolute;
        left: 0;
        z-index: 700;
        width: 15%;
        height: 100%;
    }

    .drawer{
        padding: 2% 1%;
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        cursor: pointer;
        user-select: none;
        border-right: 1px solid tomato;
        position: relative;
    }

    /* 菜单项间距 */
    .interval {
        padding-left: 1rem;
    }

    /* 搜索框 */
    .search-input-box {
        margin-bottom: 1rem;
    }

    /* 展开按钮 */
    .open {
        position: fixed;
        left: 0;
        bottom: 0;
        transition: opacity 0.3s ease;
    }
    .open:hover {
        opacity: 0.8;
    }
    .title {
        /* 基础样式 */
        width : 100%;
        height: 5%;
        font-family: 'Poppins', 'Inter', sans-serif; /* 更时尚的字体 */
        font-size: 2rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1;
        margin: 0;
        user-select: none;
        cursor: pointer;
        text-transform: uppercase; /* 大写字母更霸气 */
        text-align: center;
    
        /* 添加 flex 布局实现垂直居中 */
        display: flex;
        justify-content: center;
        align-items: center;
    
        /* 动态渐变色彩（适配深浅模式） */
        background: linear-gradient(
                90deg,
                #ff4d4d 0%,
                #f9cb28 25%,
                #25d0ab 50%,
                #1da1f2 75%,
                #9b51e0 100%
        );
        background-size: 400% 400%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent; /* 关键：让文字显示渐变 */
    
        /* 霓虹光影效果 */
        text-shadow:
                0 0 8px rgba(255, 77, 77, 0.3),
                0 0 15px rgba(249, 203, 40, 0.2),
                0 0 20px rgba(37, 208, 171, 0.2);
    
        /* 动画：流动渐变 + 呼吸光影 */
        animation:
                gradientFlow 8s ease infinite,
                glowPulse 4s ease infinite;
    
        /* 适配深色模式（增强对比度） */
        @media (prefers-color-scheme: dark) {
            text-shadow:
                    0 0 12px rgba(255, 77, 77, 0.5),
                    0 0 20px rgba(249, 203, 40, 0.4),
                    0 0 30px rgba(37, 208, 171, 0.3);
        }
    }

    /* 渐变流动动画 */
    @keyframes gradientFlow {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* 呼吸光影动画 */
    @keyframes glowPulse {
        0% { opacity: 0.95; }
        50% { opacity: 1; }
        100% { opacity: 0.95; }
    }

    /* 悬停效果：放大 + 更亮 */
    .title:hover {
        transform: scale(1.05);
        filter: brightness(1.2);
        animation:
                gradientFlow 4s ease infinite,
                glowPulse 2s ease infinite;
    }

    .slbtn {
        position: absolute;
        right: 2%;
        bottom: 2%;
    }


    /* 响应式调整 */
    @media (max-width: 960px) {
        .sidebar {
            width: 15vw;
        }
        sl-drawer {
            --size: 15vw;
        }
    }
    /* 响应式调整 */
    @media (max-width: 768px) {
        .sidebar {
            width: 15vw;
        }
        sl-drawer {
            --size: 15vw;
        }
    }
</style>


